body {
    width: 100%;
    height: 100%;
    position: relative;

    main {
        margin-top: -60px;
        flex: 1;  
        overflow: scroll;
        /* 超出显示滚动条 */
       
        // flex-direction: column;
        padding: 5%;



        .top {
            width: 100%;
            height: 60px;
            padding: 5%;
            

            /* 顶部导航平均分开 */
        }

        ;

        .distance {
            
           margin-top: 70px;
            height: 80px;
            h1,
            h6 {
                color: #4294ff;
                display: inline-block;
            }
        }

        .map {
           
            justify-content: space-around;
            .map-top {

                /* 跑步方式 */
               li{
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: #4294ff;
                border-radius: 15px;
                color: white;
               }
                
            }
            ;
            #container{
                
                height: 400px;
                width: 100%;
                position: relative;
               .map-body {
               
                /* GO按钮 */
             background-color: rgba(0, 0, 0, 0.01);
                height: 400px;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                /* 竖排 */

                #btn {
                    
                    background-color: #9bc4fb;
                    text-align: center;
                    height: 200px;
                    width: 200px;
                    line-height: 190px;
                    border-radius: 50%;
                    font-size: 60px;
                    
                };
               

                ul {
                   height: 50px;
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    li{
                        .iconfont {
                            font-size: 40px;
                            height: 50px;
                            width: 60px;
                        };
                        button{
                            width: 100px;
                            height: 40px;
                            color: white;
                            background-color: #4294ff;
                            border-radius: 20px;
                        }
                    }
                }

            } 
            }
            

            .route {
                height: 80px;
                background-color: #ffffff;

                h2 {
                    position: relative;
                    left: 360px;
                    top: -50px;
                    font-size: 50px;
                }
            }



        }
    }
    #btn{
        position: absolute;
        z-index: 99;
    }
    ;

    #model {
        width: 100%;
        height: 100%;
        background-color: #446b96;
        font-size: 40px;
        color: #ffffff;
        font-weight: lighter;
        display: none;
        position: absolute;
        left: 0;
        top: 0;

        #time {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

        }
    }
}